<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no">
    <meta content="yes" name="apple-touch-fullscreen"/>
    <title>装备评论</title>
    <link rel="stylesheet" href="/static/css/base.css?v={$staticVersion}"/>
    <link rel="stylesheet" href="/static/css/equip.css?v={$staticVersion}"/>
    <link rel="stylesheet" href="/static/lightbox2/css/lightbox.css?v={$staticVersion}" />
    <link rel="stylesheet" href="/static/css/show/dropload.css?v={$staticVersion}"/>

 
</head>
<style>
body{line-height:18px;}
.content{padding-bottom: 50px;background-color: #fff;}
.footer {position: fixed;left: 0;bottom: 0;display: flex;width: 100%;height: 40px;z-index: 100;}
</style>
<body>
<nav class="footer mui-bar">
        <a class="fx-comm-btn color_gray say-btn" href="joggers://gearRating/{$gearId}" style="width: 100%">  
            <img src="/static/images/icon/pen.png"> 
            我来说两句
        </a>
</nav>
<div id="pullrefresh" class="content">
   <!--数据列表-->
    <ul class="comment-list lists">
        
    </ul>
</div>
    <script id="template" type="text/html">
    <% for(var i=0;i<list.length;i++){ %>
    <dd>
            <a href="joggers://profile/<%=list[i].uid%>"><img src="<%=list[i].header%>"></a>
            <ul>
                <li>
                    <a href="joggers://profile/<%=list[i].uid%>"><%=list[i].nickname%></a>
                    <p class="color_gray" style="z-index: 99; font-size:12px;">
                        <span class="you usefull" data-id="<%=list[i].commentId%>">有用 <em><%=list[i].usefull%></em></span>
                        <span class="no nouse" data-id="<%=list[i].commentId%>">没用 <em><%=list[i].nouse%></em></span>
                    </p>
                </li>
                <li class="time color_gray f10"><%=list[i].dateformat%></li>
                <li class="text f14 color_dgray"><%=list[i].content%> </li>
                <li class="img-list">
                 <% if(list[i].thumbImg){ %>
                  <% for(var j=0;j<list[i].thumbImg.length;j++){ %>
                    <% if(list[i].thumbImg[j]){ %>
                    <a href="<%=list[i].image[j]%>"  data-lightbox="img_set_<%=list[i].commentId%>">
                    <img src="<%=list[i].thumbImg[j]%>" /></a>
                    <% } %>
                   <% } %>
                 <% } %>
                </li>
            </ul>
        </dd>
        <% } %>
    </script> 
<div class="back-top" style="z-index: 999"></div>

<script src="/static/js/show/zepto.min.js?v={$staticVersion}"></script>
<script src="/static/js/show/template-native.js?v={$staticVersion}"></script>
<script src="/static/js/run_main2.js?v={$staticVersion}"></script>
<script src="/static/lightbox2/js/lightbox-plus-jquery.min.js?v={$staticVersion}"></script>
<script src="/static/js/show/dropload2.min.js?v={$staticVersion}"></script>
<script src="/static/js/show/gear.js?v={$staticVersion}"></script>

<script>

$(function(){
    // 页数
    var page = 0;
    
    // dropload
    $('#pullrefresh').dropload({
        scrollArea : window,
        threshold : 50,
        loadDownFn : function(me){
            page++;
            $.ajax({
                type: 'GET',
                url: '/ajax/moreComments?gearId={$gearId}&p='+page+'&r='+Math.random(),
                dataType: 'json',
                success: function(data){
                    var arrLen = data.length;
                    if(page==1 && arrLen==0){
                        $('.lists').html('<dd class="empty"><img src="/static/images/img/wpl.png"><br/></dd>');
                        me.lock();
                        me.noData();
                        me.resetload();
                        $('.dropload-noData').css('display','none');
                        return ;
                    }
                    if(arrLen > 0){
                        $('.lists').append(template('template',{'list':data}));
                        rerenderclick();
                    }else{
                        me.lock();
                        me.noData();
                    }
                     me.resetload();
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    me.noData();
                    me.resetload();
                }
            });
        }
    });
});
 

function rerenderclick(){
    $('.usefull').off('click');
    $('.nouse').off('click');
    $('.usefull').on('click',usefull_click);
    $('.nouse').on('click',nouse_click);
}


$(window).scroll(function(){
    var sc=$(window).scrollTop();
    var rwidth=$(window).width()+$(document).scrollLeft();
    var rheight=$(window).height()+$(document).scrollTop();
    if(sc>0){
        $(".back-top").css("display","block");
        // $(".back-top").css("left",(rwidth-80)+"px");
        // $(".back-topp").css("top",(rheight-120)+"px");
    }else{
        $(".back-top").css("display","none");
    }
});
$(".back-top").click(function(){
    $('body,html').animate({scrollTop:0},300);
});


</script>

</body>
{template 'show/web-footer'}